<?php echo $this->template->add_admin_css_lib("jquery-ui-1.10.4.custom.min.css");?>
<form method="post" action="<?php echo $this->url_edit . @$edit->{$this->{$this->model}->primaryKey}; ?>"  enctype="multipart/form-data" class="form-horizontal">
<div class="row">
<div class="col-12">
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-align-justify"></i>									
			</span>
			<h5><?php echo ((@$edit->{$this->{$this->model}->primaryKey} > 0)?'Thông tin ':'Thêm mới ').@strtolower($this->resource->RES_NAME);?></h5>
		</div>
		<div class="widget-content nopadding">
				<?php echo $this->atheme->group_input2('edit[series_title]', 'Tên', '', 'span6 ', @$edit->series_title, 'text', ''); ?>
				<?php 
				$link = (@$edit->{$this->{$this->model}->primaryKey} > 0)?'<a href="'.series_url(@$edit->series_code).'" target="_blank">'.series_url(@$edit->series_code).'</a>':'';
				echo $this->atheme->group_input2('edit[series_code]', 'Code URL', '', 'span6 ', @$edit->series_code, 'text', '',$link); ?>
				
				<?php echo $this->atheme->group_select2('edit[series_status]','Trạng thái','','', array('1'=>'Sử dụng','0'=>'Ẩn'),@$edit->series_status); ?>
				
				<?php echo $this->atheme->group_single_upload('userfile', 'Thumb', '', ' span6', @$edit->series_thumb, 'text', '80px','80px'); ?>
				<?php if(@$edit->{$this->{$this->model}->primaryKey} > 0){ ?>
					<?php echo $this->atheme->group_text2( 'Ngày tạo: ', date("d/m/Y H:i:s",@$edit->series_time_create)); ?>	

					<?php echo $this->atheme->group_text2( 'Ngày cập nhật: ', date("d/m/Y H:i:s",@$edit->series_time_update)); ?>	
				<?php } ?>
				
				
				<div class="form-actions">
					<button type="submit" class="btn btn-primary btn-small"><?php echo ((@$edit->{$this->{$this->model}->primaryKey} > 0)?'Save':'Add');?></button> or <a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
				</div>
			
		</div>
	</div>						
</div>
</div>


<div class="row">
<div class="col-12">
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-align-justify"></i>									
			</span>
			<h5>Quản lý game</h5>
		</div>
		<div class="widget-content nopadding">
		<?php /*
			<div class="ui-widget">
				<input type="text" id="autocompletex" class="text mediumWidth"/>
			</div>
			*/?>
			<?php echo $this->atheme->group_input2('autocomplete', 'Tìm game', 'autocomplete', 'text mediumWidth ', '', 'text', '','Dùng chuột để sắp xếp thứ tự các game phía dưới'); ?>
			<input type="hidden" name="lists_games" id="video_list_data" value="<?php echo @$lists_games ?>"/>
			<div class="form-group">
				
				<div class="controls">
					<ul id="video_list">
						<?php 
							if (@$games)
							foreach ($games as $game) {
								echo '<li  class="ui-state-default" data-id="'.$game->game_id.'">'.$game->game_title.' <i class="error glyphicon glyphicon-remove" onclick="_remove(this);" title="Xóa">&nbsp;</i></li>';
							}
						?>
					</ul>
				</div>
			</div>
				
				<div class="form-actions">
					<button type="submit" class="btn btn-primary btn-small"><?php echo ((@$edit->{$this->{$this->model}->primaryKey} > 0)?'Save':'Add');?></button> or <a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
				</div>
			
		</div>
	</div>						
</div>
</div>

<div class="row">
<div class="col-12">
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-align-justify"></i>									
			</span>
			<h5><?php echo 'SEO '.@strtolower($this->resource->RES_NAME);?></h5>
		</div>
		<div class="widget-content nopadding">
			
				<?php echo $this->atheme->group_input2('edit[seo_h1]', 'SEO H1', '', 'span6 ', @$edit->seo_h1, 'text', ''); ?>
				<?php echo $this->atheme->group_input2('edit[seo_description]', 'SEO DESCRIPTION', '', 'span6 ', @$edit->seo_description, 'text', ''); ?>
				<?php echo $this->atheme->group_input2('edit[seo_title]', 'SEO TITLE', '', 'span6 ', @$edit->seo_title, 'text', ''); ?>
				<?php echo $this->atheme->group_input2('edit[seo_keyword]', 'SEO KEYWORD', '', 'span6 ', @$edit->seo_keyword, 'text', ''); ?>
				
				<div class="form-actions">
					<button type="submit" class="btn btn-primary btn-small"><?php echo ((@$edit->{$this->{$this->model}->primaryKey} > 0)?'Save':'Add');?></button> or <a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
				</div>
			
		</div>
	</div>						
</div>
</div>

</form>

<script type="text/javascript">
var _remove = function(dis) {
	$(dis).parent().remove();
}
//[type=submit]
$(function (){
	$('#video_list').sortable({});
	$('form').submit(
	
	 function(event, ui){
		
		var list = [];
		console.log($('#video_list li').size());
		$('#video_list li').each(function (index, item){
			list.push($(item).attr('data-id'));
			});
		$('#video_list_data').val(list.join('|'));
	});
	
	var source  = [ ];
	var mapping = { };
	$("#autocomplete").autocomplete({
	minLength: 1,
	source : function (request, response) {
		$.get("<?php echo $this->url_index;?>/ajax_search_game", { q: request.term , series: '<?php echo @$edit->{$this->{$this->model}->primaryKey}; ?>'}, function (data) {
			var raw = $.parseJSON(data);
			source  = [ ];
			mapping = { };
			for(var i = 0; i < raw.length; ++i) {
				source.push(raw[i].title);
				mapping[raw[i].title] = raw[i].id;
			}
			response(source);
		});
	},
	select: function( event, ui ) {
	console.log(ui);
		$('#video_list').append('<li  class="ui-state-default" data-id="'+mapping[ui.item.label]+'">'+ui.item.label+' <i class="error glyphicon glyphicon-remove" onclick="_remove(this);" title="Xóa">&nbsp;</i></li>');
		setTimeout(function(){$('#autocomplete').val('');}, 200);
	}   
	});
})
</script>
<style type="text/css">
	body { counter-reset: section; overflow-x: visible;}
#video_list li:before { counter-increment:section; content: counter(section)  "." ; padding-right: 10px;}
#video_list { list-style-type: none; margin: 0; padding: 0; width: 80%; }
  #video_list li {
	margin: 6px 3px 3px 3px;
	padding: 0.4em;
	padding-left: 1.5em;
	height: 33px;
	}
  #video_list li span { position: absolute; margin-left: -1.3em; }
  i.error {
  cursor: pointer;
  float: right;
  }
	#video_list li:hover {
	cursor: move;
	}
</style>